<script setup lang="ts">
import { ref } from 'vue';
// 导入路由函数
import {useRoute} from 'vue-router'

const title = ref('')

// 调用获取路由对象
const route = useRoute()
// 获取参数，查询参数方式
// title.value = route.query.query as string
title.value = route.params.words as string
</script>

<template>
  <div class="search">
    <p>搜索关键字: {{ title }}</p>
    <!-- 直接在 html 结构中获取路由参数并渲染，查询参数方式 -->
    <!-- <p>搜索关键字: {{ $route.query.query }}</p> -->

    <!-- 动态路由传参 -->
    <p>搜索关键字: {{ $route.params.words }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>